<template>
	<app-layout>
		<view class="user-shop"
			:style="{'background-image': 'url('+imgprefix+'/web/uploads/mall1/20210617/shopbg.jpg);'}">
			<view class="user-info">
				<image class="avatar" load-lazy="true" :src="storeInfo.cover_url"></image>
				<view class="nickname">
					<!-- {{storeInfo.name}} -->
					<view class="nick-nick">双熙堂精品店</view>
					<view class="nick-shop u-line-1">
						{{storeInfo.name}}的精品店
					</view>
					<view class="nick-shop u-line-1">后台管理总经理为{{wareInfo.realname}}</view>
				</view>
				<view class="complaint">
					<view class="comla" @click="nljump">
						<image src="/static/image/index/complaint.png"></image>
						有奖投诉
					</view>
					<!-- <view class="exchware" v-if="id == userInfo.vdian_id && latedown" @click="show = true">更换仓库</view> -->
				</view>
			</view>
			<!-- <u-popup v-model="show" mode="center" border-radius="14" @close="show = false" v-if="show">
				<view class="model" @touchmove.stop.prevent>
					<view class="f-top dir-left-nowrap main-between cross-center">
						<view class="f-title">是否更换仓库</view>
						<view class="f-image" @click="show = false">
							<image class="f-img" src="/static/image/icon/icon-close.png"></image>
						</view>
					</view>
					<view class="fcenter">
						选择是否更换仓库
					</view>
					<view class="whether">
						<view @click="noreplace" class="no ware">
							否
						</view>
						<view @click="replace" class="yes ware">
							是
						</view>
					</view>
				</view>
			</u-popup> -->
			<!-- <view class="" v-if="id == userInfo.vdian_id && latedown">
				<u-announcement :name="namedown" :content="contentdown" bgColor="rgba(0,0,0,0.2)" text-color="#fff">
				</u-announcement>
			</view> -->
		</view>
		<!-- 搜索 -->

		<view class="page-width">
			<app-search-for :value="value" :mch_id="mch_id"></app-search-for>
		</view>
		<!-- 导航1 -->
		<!-- 176-20 -->
		<view class="">
			<app-navigation-icon :mch_id="mch_id" :store_id="id" v-if="pageList[66].subnav.length > 0" navHeight="156"
				navMargin="20rpx auto" iconRadius="50%" :navs="pageList[66].subnav" background="#f7f7f7" :scroll="true"
				columns="5" :rows="2">
			</app-navigation-icon>
		</view>

		<!-- 导航2 -->
		<!-- 176-28 -->
		<view class="">
			<app-navigation-icon :mch_id="mch_id" v-if="pageList[67].subnav.length > 0" navHeight="148"
				navMargin="20rpx auto" :navs="pageList[67].subnav" background="#f7f7f7" :scroll="true" :columns="5"
				:rows="1">
			</app-navigation-icon>
		</view>

		<!-- banner -->

		<view v-if="pageList[68].subnav.length > 0"
			style="width: 686rpx;margin: 20rpx auto 32rpx;border-radius: 32rpx;">
			<app-swiper :list="pageList[68].subnav" borderRadius="32" mode="rect" name="icon_url" :height="242"
				:autoplay="false">
			</app-swiper>
		</view>

		<!-- 图片魔方 -->
		<view class='activity'>
			<view class='assemble' v-if="pageList[69]">
				<swiper class="swiper" indicator-dots="true" interval="3000" autoplay="true" circular="true"
					indicator-color="rgba(255,255,255,0.5)" indicator-active-color="#fff">
					<swiper-item v-for="(items,indexs) in pageList[69].subnav" :key="indexs">
						<app-jump-button form :url="items.url" @btclick="click">
							<image :src="items.icon_url" class="slide-image" />
						</app-jump-button>
					</swiper-item>
				</swiper>
			</view>
			<view class='listR' v-if="pageList[70]">
				<view class="listRt" v-for="(items,indexs) in pageList[70].subnav" :key="indexs">
					<app-jump-button form :url="items.url" @btclick="toptlist">
						<image :src="items.icon_url" class="slide-image" />
					</app-jump-button>
				</view>
			</view>
		</view>
		<!-- <view class='activity' v-if="pageList[69].subnav.length > 0 || pageList[70].subnav.length > 0">
			<view class='assemble' v-if="pageList[69].subnav.length > 0">
				<app-jump-button class="swiper" form :url="pageList[69].subnav[0].url">
					<image :src="pageList[69].subnav[0].icon_url" class="slide-image" />
				</app-jump-button>
			</view>
			<view class='listR' v-if="pageList[70].subnav.length > 0">
				<view class="listRt" v-for="(items,indexs) in pageList[70].subnav" :key="indexs">
					<app-jump-button form :url="items.url" @btclick="toptlist">
						<image :src="items.icon_url" class="slide-image" />
					</app-jump-button>
				</view>
			</view>
		</view> -->

		<!-- 一排三个说明视频 -->
		<view class="subject">
			<view class="subject-item" v-for="(item,index) in videolist" :key="index" @click="isvideo(index)">
				<image :src="item.cover_pic" mode="" class="subject-image"></image>
				<image :src="imgprefix+'/web/uploads/mall1/20210331/50af8c15686da2c9044ce0769d010b3f.png'" mode=""
					class="subject-play"></image>
				<view class="subject-title u-line-2">
					{{item.title}}
				</view>
			</view>
		</view>

		<video v-if="isvshow" :autoplay="true" :loop="true" :src="videolist[curindex].vdetail[0].url"
			style="position: fixed;top: 0;left: 0;width: 100%;height: 460rpx;z-index: 1600;" controls></video>
		<view class="close" @click="closev" v-if="isvshow">
			<image class="image" src="../../../static/image/icon/video-close.png"></image>
		</view>
		<!-- <view class="subject">
			<view class="subject-item">
				<image src="../../../static/image/index/live.png" mode="" class="subject-image"></image>
				<image src="https://ceshi.senmainet.com/web/uploads/mall1/20210331/50af8c15686da2c9044ce0769d010b3f.png"
					mode="" class="subject-play"></image>
				<view class="subject-title u-line-2">
					说明视频名称说明视频名称说明视频名称
				</view>
			</view>
			<view class="subject-item">
				<image src="../../../static/image/index/live.png" mode="" class="subject-image"></image>
				<view class="subject-title u-line-2">
					说明视频名称说明视频名称说明视频名称
				</view>
			</view>
			<view class="subject-item">
				<image src="../../../static/image/index/live.png" mode="" class="subject-image"></image>
				<view class="subject-title u-line-2">
					说明视频名称说明视频名称说明视频名称
				</view>
			</view>
		</view> -->
		<!-- 成为双熙堂合伙人 -->
		<view class='partner' v-if="pageList[72]">
			<app-jump-button form :open_type="pageList[72].open_type" :url="pageList[72].url">
				<image :src="pageList[72].icon_url" class="image" />
			</app-jump-button>
		</view>
		<!-- 实体店直播，好货快快抢 -->
		<view class="beseparate" v-if="pageList[73].subnav.length > 0">
			<app-jump-button class="besebutton" v-for="(item,idx) in pageList[73].subnav" :key="idx" form
				open_type="reLaunch" :url="item.url">
				<view class="besepone">
					<image class="image" :src="item.icon_url" mode=""></image>
				</view>
			</app-jump-button>
		</view>
		<!-- 今日推荐 -->
		<!-- <view class="today" v-if="pageList[74]" @click="jump(pageList[74].url)">
			<view class="icon" style="box-sizing: content-box;">
				<image class="image" :src="pageList[74].icon_url"></image>
			</view>
			<view class="text">
				<view class="title">
					{{pageList[74].name}}
				</view>
				<view class="dec">
					{{pageList[74].params.describe}}
				</view>
			</view>
		</view> -->
		<view class="today" v-if="pageList[74]" @click="jump(pageList[74].url)">
			<image :lazy-load="true" :src="pageList[74].icon_url" class="image" mode="widthFix" />
		</view>
		<!-- 商品循环 -->
		<!-- <view v-if="goods_list.length != 0" class="beloop" :style="{height:beHeight+'rpx'}">
			<view class="belooprow" :style="item.style" v-for="(item,index) in goods_list" :key="index"
				@click="shopDetail(item.id,item.mch_id)">
				<view class="image">
					<image class="img" :src="item.cover_pic"></image>
					<view class="no-goods" v-if="item.goods_stock == 0">
						<view class="no-title">
							已售
						</view>
					</view>
				</view>
				<view class="title u-line-2">
					{{item.name}}
				</view>
			</view>
		</view> -->
		<view v-if="goods_list.length != 0" class="beloop">
			<u-goods-ware :value="goods_list" @routego="shopDetail"></u-goods-ware>
		</view>
		<view v-else class="benoloop">
			等待，有惊喜哦
		</view>
		<!-- 返回顶部 -->
		<view class="quick-box dir-top-nowrap" style="bottom: 180rpx" v-if="opacity == 1">
			<image @click="backTop" class="quick-btn" src="../../../static/image/icon/back-top.png"></image>
		</view>
	</app-layout>
</template>
<script>
	import {
		mapGetters,
		mapState
	} from 'vuex';

	import uAnnouncement from '../../../components/page-component/u-announcement/u-announcement.vue';
	import appSearchFor from '../../../components/page-component/app-search-for/app-search-for.vue';
	import appSwiper from '../../../components/page-component/app-swiper/app-swiper.vue';
	import appNavigationIcon from '../../../components/page-component/app-navigation-icon/app-navigation-icon.vue';
	import appQuickNavigation from "../../../components/page-component/app-quick-navigation/app-quick-navigation.vue";
	import uGoodsWare from '../../../components/page-component/u-goods-list/u-goods-ware.vue';
	import uPopup from '../../../components/basic-component/u-popup/u-popup.vue';

	export default {
		name: 'index',
		components: {
			uAnnouncement,
			appSearchFor,
			appSwiper,
			appNavigationIcon,
			appQuickNavigation,
			uGoodsWare,
			uPopup
		},

		data() {
			return {
				homePages: [],
				type: '',
				is_storage: false,
				haveBackground: true,
				destroy: true,
				pageHide: false,
				is_required: true,
				coupon_req: false,
				page_id: 0,
				//
				attrGoods: {
					goods: {},
					attrShow: 0
				},
				// 店铺信息
				storeInfo: '',
				wareInfo: '',
				mch_id: 0,
				id: 0,
				// 店铺到时间
				namedown: '',
				contentdown: '',
				latedown: false,
				show: false,

				value: {
					background: `#f7f7f7`,
					color: '#f7f7f7',
					placeholder: '搜索',
					radius: 28,
					textColor: '#c0c0c0',
					textPosition: `center`,
					shadow: `0 16rpx 32rpx rgba(0, 0, 0, 0.1);`
				},
				pageList: [],
				videolist: [],
				curindex: 0,
				vtotop: 0,
				isvshow: false,
				page: 1,
				total_count: 0,
				sort: 1,
				sort_type: 0,
				coupon_id: 0,
				boxHeight: [],
				beHeight: '',
				goods_list: [],
				imgprefix: this.$siteInfo.imgroot,
				storeDetail: '',
				isLate: 0,
				lateday: 0,
				// 返回顶部
				top: 400,
				scrollTop: 0,
				opacity: 0,
			}
		},
		onShow() {
			this.pageHide = false;
			if (this.vtotop == 0) {
				uni.createSelectorQuery().select('.subject').boundingClientRect((res) => {
					if (res && res.top > 0) {
						var navbarInitTop = parseInt(res.top);
						this.vtotop = navbarInitTop
					}
				}).exec();
			}
		},
		onHide() {
			this.pageHide = true;
		},
		onLoad(options) {
			// this.kefu()
			// this.imgprefix = this.$siteInfo.imgroot
			this.id = options.id
			this.mch_id = options.mch_id
			// 10.12 mounted 
			// this.navsReq()
			// 10.12 修改到 mounted
			this.loadetail()
			this.loadlist()
			this.request()
			/* this.$request({
				url: this.$api.apply.detail,
				data: {
					id: options.id
				}
			}).then(res => {
				this.$hideLoading();
				if (res.code === 0) {
					this.storeInfo = res.data.detail.list
					console.log(this.storeInfo);
					// uni.setNavigationBarTitle({
					// 	title: this.storeInfo.name + '的店铺',
					// });
				}
			}).catch(res => {
				this.$hideLoading();
			}) */
			// 测试下分支
			if (typeof options.scene !== 'undefined') {
				if (options.scene === 'share') {
					this.share(options);
				} else {
					this.qrcode(options);
				}
			} else {
				// this.$showLoading();
			}

			if (typeof options.user_id !== 'undefined') {
				this.$store.dispatch('user/setTempParentId', options.user_id);
			}

			this.page_id = typeof options.page_id !== 'undefined' ? Number(options.page_id) : 0;

			// #ifdef MP-WEIXIN
			wx.showShareMenu({
				menus: ['shareAppMessage', 'shareTimeline']
			})
			const updateManager = wx.getUpdateManager()
			if (updateManager) {
				updateManager.onCheckForUpdate(function(res) {
					// 请求完新版本信息的回调
				})

				updateManager.onUpdateReady(function() {
					wx.showModal({
						title: '更新提示',
						content: '新版本已经准备好，是否重启应用？',
						success(res) {
							if (res.confirm) {
								// 新的版本已经下载好，调用 applyUpdate 应用新版本并重启
								updateManager.applyUpdate()
							}
						}
					})
				})
			}
			// #endif
		},
		mounted() {
			this.navsReq()
			// 10.12
			// this.loadetail()
			// this.loadlist()
			// this.request()
		},
		watch: {
			// 返回顶部
			showBackTop(nVal, oVal) {
				// 当组件的显示与隐藏状态发生跳变时，修改组件的层级和不透明度
				// 让组件有显示和消失的动画效果，如果用v-if控制组件状态，将无设置动画效果
				if (nVal) {
					this.opacity = 1;
				} else {
					this.opacity = 0;
				}
			},
			/* goods_list: function(newVal, oldVal) {
				// console.log(newVal,66666,oldVal,7777777);
				if (newVal != oldVal) {
					let mark = oldVal.length;
					let len = this.goods_list.length;
					let style = '';
					this.$nextTick(async function() {
						const query = uni.createSelectorQuery().in(this);
						let dataArray = [];
						await new Promise((resolve, reject) => {
							query.selectAll('.beloop .belooprow').fields({
								size: true
							}, data => {
								dataArray = data;
								resolve()
							}).exec();
						})
						for (let i = mark; i < len; i++) {
							if (i < 2) {
								if (i == 0) {
									style = `top: 0; left: 16rpx;`
								} else {
									style = `top: 0; left: 382rpx;`
								}
								this.boxHeight.push(dataArray[i].height)
								if (this.boxHeight[0] < this.boxHeight[1]) {
									this.beHeight = this.boxHeight[1] * 2
								} else {
									this.beHeight = this.boxHeight[0] * 2
								}
							} else {
								let minHeight = this.boxHeight[0];
								if (minHeight > this.boxHeight[1]) {
									minHeight = this.boxHeight[1];
									this.boxHeight[1] = minHeight + dataArray[i].height;
									style = `top: ${minHeight*2 + 32 * Math.floor(i/2)}rpx; left: 382rpx;`
									this.beHeight = this.boxHeight[1] * 2 + 32 * Math.floor(i / 2)
								} else {
									this.boxHeight[0] = minHeight + dataArray[i].height;
									style = `top: ${minHeight*2 + 32 * Math.floor(i/2)}rpx; left: 16rpx;`
									this.beHeight = this.boxHeight[0] * 2 + 32 * Math.floor(i / 2)
								}
							}
							this.$set(newVal[i], 'style', style);
							this.$forceUpdate();
						}
					})
				}
			} */
		},
		/* #ifdef MP_WEIXIN || MP_BAIDU */
		onPageScroll(e) {
			// this.$store.dispatch('page/actionSetScrollTop', e.scrollTop);
			// this.$store.dispatch('page/actionSetScrollTop', e.scrollTop);
			let self = this
			// 返回顶部
			self.scrollTop = e.scrollTop;
			var scrollTop = parseInt(e.scrollTop);
			if (self.isvshow == true) {
				if (scrollTop < self.vtotop) {
					self.isvshow = false
				} else {
					self.isvshow = true
				}
			}
		},
		/* #endif */
		onReachBottom() {
			if (this.page < this.page_count) {
				this.page++;
				this.request();
			} else {
				let goodslist = this.$storage.getStorageSync('goodsList');
				if (goodslist) {
					this.goods_list = this.goods_list.concat(goodslist)
					// console.log(this.goods_list);
				} else {
					this.page = 1
					this.request()
				}
				/* this.page = 1
				this.request() */
			}
		},
		methods: {
			replace() {
				uni.navigateTo({
					url: '/pages/store/warelist'
				})
			},
			noreplace() {
				uni.navigateTo({
					url: '/pages/bepartner/apply/apply'
				})
			},
			click(item) {
				if (item == 'javascript:;' || item == '/') {
					return;
				} else if (item.indexOf('/plugins/mch/goodslist/goodslist') != -1) {
					// item = item + '&mch_id=' + this.mch_id + '&store_id=' + this.store_id + '&title=' + item.name
					if (item.indexOf('?') == -1) {
						item = item + '?mch_id=' + this.mch_id + '&store_id=' + this.store_id + '&title=' + item.name
					} else {
						item = item + '&mch_id=' + this.mch_id + '&store_id=' + this.store_id + '&title=' + item.name
					}
					uni.navigateTo({
						url: item
					})
					// this.$emit('boqlist', item)
					return;
				} else if (item.indexOf('/plugins/pt/index/index') != -1 || item.indexOf('/pages/goods/list') != -
					1) {
					if (item.params.kefu_url != undefined) {
						this.$storage.setStorageSync('KEFU', item.params.kefu_url)
					} else {
						this.$storage.removeStorageSync('KEFU')
					}
					if (item.indexOf('?') == -1) {
						item = item + '?title=' + item.name
					} else {
						item = item + '&title=' + item.name
					}

					uni.navigateTo({
						url: item
					})
					return;
				} else {
					uni.navigateTo({
						url: item
					})
				}
			},
			// 返回顶部
			backTop() {
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 300
				});
			},
			jump(item) {
				if (item.indexOf('?') == -1) {
					item = item + '?mch_id=' + this.mch_id + '&id=' + this.id
				} else {
					item = item + '&mch_id=' + this.mch_id + '&id=' + this.id
				}
				uni.navigateTo({
					url: item
				})
			},
			toptlist(url) {
				if (url.indexOf('?') == -1) {
					url = url + '?mch_id=' + this.mch_id
				} else {
					url = url + '&mch_id=' + this.mch_id
				}
				uni.navigateTo({
					url: url
				})
			},
			nljump() {
				if (this.$store.state.user.accessToken === '' || this.$store.state.user.accessToken === null) {
					this.$store.dispatch('user/accessToken');
				} else {
					uni.navigateTo({
						url: '/pages/complaint/index'
					});
				}
			},
			loadlist() {
				this.$request({
					url: this.$api.topic.list,
					data: {
						type: 4,
						limit: 3
					}
				}).then((res) => {
					this.videolist = res.data.list
				}).catch(err => {

				})
			},
			loadetail() {
				this.$request({
					url: this.$api.apply.detail,
					data: {
						id: this.id
					}
				}).then(res => {
					this.$hideLoading();
					if (res.code === 0) {
						this.storeInfo = res.data.detail
						// this.isLate = res.data.isLate
						// this.lateday = res.data.lateday
						this.wareInfo = res.data.mchinfo
						if (res.data.detail.is_default != 0) {
							this.latedown = true
							this.namedown = '珠宝店更换经理'
							this.contentdown = '珠宝店需确认是否更换仓库经理'
						}
						/* uni.setNavigationBarTitle({
							title: this.storeInfo.name + '的店铺',
						}); */
					}
				}).catch(res => {
					this.$hideLoading();
				})
			},
			isvideo(index) {
				this.curindex = index
				this.isvshow = true
			},
			closev() {
				this.isvshow = false
			},
			shopDetail(item) {
				uni.navigateTo({
					// url:'/pages/goods/goods?id='+id+'&store_id='+this.id
					// url: '/plugins/mch/goods/goods?id=' + item.id + '&mch_id=' + item.mch_id + '&store_id=' + this.id
					url: item.page_url + '&store_id=' + this.id + '&title=' + this.name
				})
			},
			/* shopDetail(id,mch_id) {
				uni.navigateTo({
					// url:'/pages/goods/goods?id='+id+'&store_id='+this.id
					url: '/plugins/mch/goods/goods?id=' + id + '&mch_id=' + mch_id + '&store_id=' + this.id
				})
			}, */
			navsReq() {
				this.$request({
					url: this.$api.navs.index,
					data: {
						id: 8
					}
				}).then((res) => {
					if (res.code === 0) {
						this.pageList = res.data.list
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				}).catch(() => {

				})
			},
			/* async kefu(){
				const res = await this.$request({
					url: this.$api.mch.detail,
					data: {
						id: this.mch_id
					}
				})
				if(res.code == 0){
					this.storeDetail = res.data.mchSetting
					return storekefu:{
						web: {
							opened: true,
							picUrl: res.data.mchSetting.web_service_pic,
							url: res.data.mchSetting.web_service_url,
						},
						useMallConfig: false,
					}
				}
			}, */
			kefu() {
				this.$request({
					url: this.$api.mch.detail,
					data: {
						id: this.mch_id
					}
				}).then(res => {
					if (res.code == 0) {
						this.storeDetail = res.data.mchSetting
						/* return {
							home: {
								opened: false,
								picUrl: 'http://www.bangdian.net/web/uploads/mall51/20190724/3d3abd2944d5d32b9a9780fd3525bb50.jpg',
							},
							web: {
								opened: true,
								picUrl: res.data.mchSetting.web_service_pic,
								url: res.data.mchSetting.web_service_url,
							},
							useMallConfig: false,
						} */
					}
				})
			},
			share(options) {
				if (typeof options.params !== 'undefined') {
					let params = JSON.parse(options.params);
					this.$jump({
						url: params.path + '?' + this.$utils.objectToUrlParams(params),
						open_type: 'navigate'
					});
				}
			},
			qrcode(options) {
				this.$request({
					url: this.$api.default.qrcode_parameter,
					data: {
						token: options.scene
					}
				}).then(response => {
					if (response.code === 0) {
						this.$store.dispatch('page/actionSetQeury', null);
						let {
							data,
							path
						} = response.data.detail;
						let url = path == 'plugin-private://wx2b03c6e691cd7370/pages/live-player-plugin' ?
							`${path}` : `/${path}`;
						if (data) {
							url += '?' + this.$utils.objectToUrlParams(data);
							if (typeof data.user_id !== 'undefined') {
								this.$store.dispatch('user/setTempParentId', data.user_id)
							}
						}
						if (`/${path}` != '/pages/index/index' || (typeof data.page_id !== 'undefined' && data
								.page_id !== this.homePages.id !== 0)) {
							this.$jump({
								url: url,
								open_type: 'navigate'
							});
						}
					}
				}).catch(() => {});
			},
			buyProduct(data) {
				this.attrGoods.goods = data.goods;
				this.attrGoods.attrShow = data.attrShow;
			},
			async request() {
				const res = await this.$request({
					// url: this.$api.default.goods_list,
					url: this.$api.mch.goods,
					method: 'get',
					data: {
						status: 1,
						page: this.page,
						sort: this.sort,
						sort_type: this.sort_type,
						mch_id: this.mch_id,
						keyword: '',
						// coupon_id: this.coupon_id,
						sign: '',
						is_sold_out: 0
					}
				});
				if (res.code === 0) {
					this.page_count = res.data.pagination.page_count;
					this.total_count = res.data.pagination.total_count;
					this.goods_list = this.goods_list.concat(res.data.list)
					if (this.total_count === 0) {
						this.noGoods = true;
					}
					if (this.goods_list < 2) {
						this.goods_list = this.goods_list.concat(res.data.list)
					}
					this.$storage.setStorageSync('goodsList', this.goods_list)
				} else {
					uni.showModal({
						title: '提示',
						content: res.msg,
					})
				}
			},
		},
		onShareAppMessage() {
			return this.$shareAppMessage({
				path: '/pages/store/boutique/boutique',
				params: {
					id: this.id,
					mch_id: this.mch_id
				}
			});
		},
		computed: {
			// 返回顶部
			showBackTop() {
				// 由于scrollTop为页面的滚动距离，默认为px单位，这里将用于传入的top(rpx)值
				// 转为px用于比较，如果滚动条到顶的距离大于设定的距离，就显示返回顶部的按钮
				return this.scrollTop > uni.upx2px(this.top);
			},
			...mapGetters('mallConfig', {
				tabBarNavs: 'getNavBar',
				getTheme: 'getTheme',
			}),
			...mapState('mallConfig', {
				config: state => state.mall.setting,
			}),
			...mapState({
				userInfo: state => state.user.info,
			}),
		},
		// #ifdef MP-WEIXIN
		onShareTimeline: function() {
			return this.$shareTimeline({
				title: '精品店',
				query: {
					id: this.id,
					mch_id: this.mch_id
				}
			});
		},
		// #endif
	};
</script>
<style lang="scss" scoped>
	page {
		background: #f7f7f7;
	}

	.model {
		width: 526rpx;
		height: 326rpx;
		background-color: #FFFFFF;

		.f-top {
			height: 100rpx;
			border-bottom: 1upx solid #ececec;
			padding-left: 24upx;
			background-color: #ffffff;
			border-radius: 32rpx 32rpx 0 0;
			font-size: 30rpx;

			.f-image {
				width: 78upx;
				height: 78upx;
				padding: 24upx;

				.f-img {
					width: 24upx;
					height: 24upx;
				}
			}
		}

		.fcenter {
			width: 100%;
			height: 106rpx;
			padding: 32rpx;
			font-size: 28rpx;
			color: #CDCDCD;
		}

		.whether {
			width: 100%;
			display: flex;
			justify-content: space-around;
			align-items: center;

			.ware {
				padding: 20rpx 52rpx;
				font-size: 32rpx;
				font-weight: 600;
				border: 1rpx solid #d9d9d9;
			}

			.no {
				color: #ff2600;
			}

			.yes {
				color: #63BE72;
			}
		}
	}

	.user-shop {
		position: relative;
		height: 416rpx;
		background-size: cover;
		background-repeat: no-repeat;
	}

	.user-info {
		width: 686rpx;
		display: flex;
		color: #fff;
		// height: 144rpx;
		position: absolute;
		top: 148rpx;
		left: 32rpx;
	}

	.user-info .nickname {
		padding-left: 32rpx;
		width: 396rpx;
		// width: 416rpx;
	}

	.user-info .nickname .nick-nick {
		font-size: 44rpx;
		line-height: 68rpx;
		font-weight: bold;
	}

	.user-info .nickname .nick-shop {
		font-size: 24rpx;
		line-height: 36rpx;
		margin-top: 30rpx;
	}

	.exchware {
		margin-top: 24rpx;
		padding: 10rpx 20rpx;
		border: 1rpx solid #fff;
	}

	.user-info .complaint {
		width: 140rpx;
		// width: 120rpx;
		font-size: 24rpx;
		line-height: 36rpx;
		/* display: flex;
		flex-direction: column;
		align-items: center; */
	}

	.user-info .complaint .comla {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.user-info .complaint image {
		width: 42rpx;
		height: 48rpx;
		margin-bottom: 12rpx;
		font-size: 24rpx;
	}

	.user-info .user-member-info {
		margin-top: 16rpx;
		font-size: 20rpx;
	}

	.user-info .avatar {
		height: 144rpx;
		width: 144rpx;
		border-radius: 50%;
		border: 2rpx solid #fff;
	}

	.activity {
		width: 686rpx;
		margin: 0 auto;
		height: 396rpx;
		display: flex;
		justify-content: space-between;

		.assemble {
			width: 332rpx;
			height: 100%;

			.swiper {
				height: 100%;

				.slide-image {
					height: 100%;
				}
			}

			/* #ifdef MP-WEIXIN */
			.wx-swiper-dot {
				width: 20rpx;
				height: 4rpx;
				border-radius: 2rpx;

				margin-left: -6rpx;

				&.wx-swiper-dot-active {
					width: 40rpx;
				}
			}

			.wx-swiper-dots.wx-swiper-dots-horizontal {
				margin-bottom: 5rpx;
			}

			/* #endif */
		}

		.listR {
			width: 332rpx;
			height: 100%;
			display: flex;
			flex-direction: column;
			justify-content: space-between;

			.listRt {
				height: 188rpx;

				.slide-image {
					height: 100%;
				}
			}
		}
	}

	/* 说明视频 */
	.video {
		width: 686rpx;
		height: 396rpx;
		margin: 0 auto;
		position: relative;
		border-radius: 32rpx;
		overflow: hidden;
		margin: 32rpx;
	}

	.video .video-cover {
		position: absolute;
		width: 100%;
		height: 100%;
	}

	.video .video-play {
		width: 80rpx;
		height: 80rpx;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}

	.video .video-explain {
		position: absolute;
		width: 100%;
		height: 62rpx;
		background: rgba(0, 0, 0, 0.4);
		backdrop-filter: blur(9px);
		bottom: 0;
		left: 0;
		text-align: center;
		color: #FFFFFF;
		line-height: 62rpx;
		font-size: 24rpx;
		border-radius: 0 0 32rpx 32rpx;
	}

	.coupon-video {
		width: 686rpx;
		height: 396rpx;
		margin: 32rpx auto;
		display: flex;
		justify-content: space-between;
		border-radius: 16px;
	}

	.coupon-video .video-item {
		width: 332rpx;
		height: 396rpx;
		border-radius: 32rpx;
		overflow: hidden;
		background: #FFFFFF;
		position: relative;

	}

	.coupon-video .video-item .video-cover {
		position: absolute;
		width: 100%;
		height: 100%;
	}

	.coupon-video .video-item .video-play {
		width: 80rpx;
		height: 80rpx;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}

	.coupon-video .video-item .video-explain {
		position: absolute;
		width: 332rpx;
		height: 62rpx;
		background: rgba(0, 0, 0, 0.4);
		border-radius: 0 0 32rpx 32rpx;
		backdrop-filter: blur(9px);
		bottom: 0;
		left: 0;
		text-align: center;
		color: #FFFFFF;
		line-height: 62rpx;
		font-size: 24rpx;
	}

	// 一排三个说明视频
	.subject {
		width: 686rpx;
		// height: 230rpx;
		margin: 32rpx auto;
		display: flex;
		justify-content: space-between;
		align-items: center;

		.subject-item {
			width: 208rpx;
			height: 200rpx;
			background-color: #FFFFFF;
			border-radius: 16rpx;
			overflow: hidden;
			position: relative;

			.subject-image {
				width: 100%;
				height: 122rpx;
			}

			.subject-play {
				// position: absolute;
				// width: 54rpx;
				// height: 54rpx;
				// top: 61rpx;
				// left: 50%;
				// transform: translate(-50%, -50%);
				position: absolute;
				width: 32rpx;
				height: 32rpx;
				top: 8rpx;
				right: 8rpx;
			}

			.subject-title {
				margin: 2rpx 16rpx;
				font-size: 22rpx;
				color: #333333;
			}
		}
	}

	.close {
		position: fixed;
		top: #{26upx};
		right: #{26upx};
		width: #{70upx};
		height: #{70upx};
		z-index: 1606;
		border-radius: #{35upx};
		background-color: rgba(51, 51, 51, .4);

		.image {
			width: #{26upx};
			height: #{26upx};
			position: absolute;
			left: 50%;
			top: 50%;
			transform: translate(-50%, -50%);
		}
	}

	/* 成为双熙堂合伙人 */
	.partner {
		width: 686rpx;
		margin: 20rpx auto;
		background: linear-gradient(180deg, #EDD5D5 0%, #C8C8C8 100%);
		border-radius: 32rpx;
		height: 192rpx;
		overflow: hidden;
	}

	.partner-url {
		width: 100%;
		height: 100%;
	}

	.partner .image {
		width: 100%;
		height: 100%;
	}

	/* 实体店直播，好货快快抢 */
	.beseparate {
		width: 686rpx;
		margin: 20rpx auto;
		display: flex;
		justify-content: space-between;
	}

	.besebutton:nth-child(2n-1) .besepone .besepdec {
		color: #FE4C4B
	}

	.besebutton:nth-child(2n) .besepone .besepdec {
		color: #F2994A
	}

	/* .besepone {
		position: relative;
		padding: 24rpx 24rpx 32rpx 36rpx;
		width: 328rpx;
		height: 230rpx;
		background: #FFFFFF;
		border-radius: 16rpx;
		overflow: hidden;
	} */
	.besepone {
		position: relative;
		// padding: 24rpx 24rpx 32rpx 36rpx;
		width: 328rpx;
		// height: 230rpx;
		height: 460rpx;
		background: #FFFFFF;
		border-radius: 16rpx;
		overflow: hidden;

		.image {
			width: 328rpx;
			// height: 230rpx;
			height: 460rpx;
		}
	}

	/* .besepone:first-child .besepdec {
	  color: #FE4C4B
	}
	
	.besepone:last-child .besepdec {
	  color: #F2994A
	} */

	/* .besepone:first-child .besepimage {
	  width: 118rpx
	}
	
	.besepone:last-child .besepimage {
	  width: 188rpx
	} */

	.besepimage {
		position: absolute;
		bottom: 12rpx;
		right: 24rpx;
		height: 152rpx;
		width: 118rpx
	}


	.besepimage .image {
		height: 100%;
		width: 100%;
	}

	.beseptitle {
		font-weight: bold;
		font-size: 36rpx;
		line-height: 48rpx;
		color: #333;
	}

	.besepdec {
		font-size: 28rpx;
		line-height: 132%;
		font-weight: 500;
	}

	.beseplaying {
		background: linear-gradient(90deg, #FD6E60 0%, #FE4C4B 100%);
		border-radius: 22rpx;
		width: 140rpx;
		height: 40rpx;
		overflow: hidden;
		margin-top: 50rpx;
		padding: 6rpx 20rpx;
		display: flex;
		align-items: center;
	}

	.beseplaying .image {
		height: 28rpx;
		width: 28rpx;
	}

	.beseplaying .text {
		color: #FFFFFF;
		font-size: 22rpx;
		margin-left: 4rpx;
	}

	/* 今日推荐 */
	.today {
		width: 686rpx;
		margin: 20rpx auto;
		background: #342B2A;
		box-shadow: 0px 30px 60px rgba(57, 57, 57, 0.1);
		border-radius: 32rpx;
		display: flex;
		align-items: center;

		.image {
			width: 100%;
			height: 100%;
		}
	}

	.today .icon {
		width: 168rpx;
		height: 160rpx;
		padding-left: 40rpx;
	}

	.today .icon .image {
		width: 100%;
		height: 100%;
	}

	.today .text {
		width: 356rpx;
		text-align: center;
	}

	.today .text .title {
		color: #FFFFFF;
		font-weight: 900;
		font-size: 48rpx;
		line-height: 84rpx;
	}

	.today .text .dec {
		color: #CD9C62;
		font-size: 28rpx;
		line-height: 40rpx;
	}

	/* 循环 */
	.beloop {
		// width: 686rpx;
		margin: 48rpx auto 12rpx;
		position: relative;
		/* display: flex;
		justify-content: space-between;
		align-items: center;
		flex-wrap: wrap; */
	}

	.benoloop {
		margin: 100rpx auto;
		// width: 686rpx;
		text-align: center;
		font-size: 36rpx;
	}

	.belooprow {
		position: absolute;
		top: 0;
		left: 0;
		margin-bottom: 32rpx;
		width: 350rpx;
		// height: 454rpx;
		background: #FFFFFF;
		box-shadow: 0px 30px 60px rgba(57, 57, 57, 0.1);
		border-radius: 16rpx;
		overflow: hidden;
	}

	.belooprow .image {
		width: 100%;
		height: 470rpx;
		position: relative;

		.no-goods {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background-color: rgba(0, 0, 0, 0.3);
			margin: 0 auto;

			.no-title {
				width: 124rpx;
				height: 124rpx;
				border-radius: 50%;
				background-color: rgba($color: #000000, $alpha: 0.5);
				backdrop-filter: blur(9px);
				font-size: 36rpx;
				text-align: center;
				line-height: 124rpx;
				color: #FFFFFF;
				font-weight: bold;
				position: absolute;
				left: 50%;
				top: 50%;
				transform: translate(-50%, -50%);
			}
		}
	}

	.belooprow .image .img {
		width: 100%;
		height: 100%;
	}

	.belooprow .title {
		margin: 8rpx 14rpx 24rpx;
		font-size: 12px;
		line-height: 18px;
		color: rgba(0, 0, 0, 0.84);
	}

	// 返回顶部
	.quick-box {
		position: fixed;
		bottom: #{40rpx};
		right: #{48rpx};
		z-index: 100;
		transition: opacity 0.4s;
	}

	.quick-btn {
		width: #{80rpx};
		height: #{80rpx};
		margin-top: #{32rpx};
	}
</style>
